<template>
	<view>
		<goods-list :goods="goods" @goodsItemClick="goGoodsDetail"></goods-list>
		<view class="isOver" v-if="flag">...我是有底线的...</view>
	</view>
</template>

<script>
	import goodsList from '@/components/goods_list/goods_list.vue'
	export default{
		data(){ 
			return{
				pageIndex:1,
				goods:[],
				flag:false
			}
		},
		components:{
			goodsList
		},
		onLoad(){
			this.getGoodsList();
		},
		onReachBottom(){
			console.log("触底了");
			//判断是否还有数据
			if(this.goods.length< this.pageIndex*10){
				console.log(this.goods.length,this.pageIndex*10)
				this.flag = true;
				return;
			}
			console.log(this.pageIndex)
			this.pageIndex++;
			this.getGoodsList();
		},
		onPullDownRefresh(){
			console.log("下拉刷新啦!");
			this.pageIndex =1;
			this.flag=false;
			this.goods = [];
			setTimeout(()=>{
				this.getGoodsList(()=>{ //传递回调函数
					uni.stopPullDownRefresh();
				})
			},1000);
		},
		methods:{
			async getGoodsList(callBack){
				const res = await this.$myRequest({
					url:'/api/getgoods?pageindex='+this.pageIndex
				})
				// this.goods = res.data.message;
				this.goods =[...this.goods,...res.data.message];
				callBack && callBack();
				console.log(this.goods);
			},
			//跳转到商品详情页
			goGoodsDetail(id){
				uni.navigateTo({
					url:"/pages/goods_detail/goods_detail?id="+id
				})
			}
		}
	}
</script>

<style>
	.isOver{
		width:100%;
		text-align:center;
		font-size:20rpx;
		padding:15rpx 0;
		background:#b50e03;
		color:#fff;
	}
</style>